<template>
  <van-nav-bar
    title="急速服务"
    left-text="返回"
    left-arrow
    fixed
    placeholder
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
</template>

<script>
import { useRouter} from "vue-router";
import { Toast } from "vant";

export default {
  name: "Header",
  setup() {
    //使用路由组件
    const router = useRouter();

    const onClickLeft = () => {
      router.back();
    };

    const onClickRight = () => {
      Toast("暂未开通");
    };

    return {
      onClickLeft,
      onClickRight,
    };
  },
};
</script>

<style lang="less">
.van-nav-bar__content {
  background-color: #76ad17;
}
.van-nav-bar__title {
  color: #ffffff !important;
}
.van-nav-bar__text {
  color: #ffffff !important;
}
.van-nav-bar .van-icon {
  color: #ffffff !important;
}
</style>